
<template>
    <div>
        <Row>
            <Col span="4"><h1>招商订单列表</h1></Col>
            <Col span="13"><Button type="primary" size="large" @click="exportData"><Icon type="ios-download-outline"></Icon>导出表格数据</Button></Col> 
            <Col span="1"><Button type="primary" size="large" @click="totalClick">全部</Button></Col>
            <Col span="6">
                <Input v-model="search">
                    <Select v-model="select2" slot="prepend" style="width: 80px">
                        <Option value="name">姓名</Option>
                        <Option value="uid">编号</Option>
                        <Option value="p_num">手机号</Option>
                    </Select>
                    <Button slot="append" icon="ios-search" @click="findOne"></Button>
                </Input>
            </Col>   
        </Row>  
        <Table :columns="columns1" :data="data1" ref="table"></Table>
        <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
                <Page :total="dataCount" :page-size="pageSize" show-total @on-change="changePage"></Page>
            </div>
        </div>
        <h1>用户招商收益</h1>
        <Table :columns="columns2" :data="data2"></Table>
        

    </div>
</template>
<script>
export default {
    data() {
        return {
            pageSize:10,
            dataCount:0,
            select2:"name",
            search:"",
            historyDate:[],
            columns1: [
                {
                    title: "订单编号",
                    key: "id"
                },
                {
                    title: "会员名称",
                    key: "name"
                },
                {
                    title: "手机号",
                    key: "p_num"
                },
                {
                    title: "招商费用",
                    key: "price"
                },
                {
                    title: "创建时间",
                    key: "create_time",
                    render:(h,params)=>{
                        return h('div', function(){
                            let n = Date.parse(params.row.create_time);
                            let date = new Date();
                            date.setTime(n);
                            return date.toLocaleString();
                        }())
                    }
                },
                {
                    title: "招商收益",
                    key: "action",
                    width: 150,
                    align: "center",
                    render: (h, params) => {
                        return h("div", [
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "primary",
                                        size: "small"
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index);
                                        }
                                    }
                                },
                                "查看"
                            )
                        ]);
                    }
                }
            ],
               columns2: [
                {
                    title: "时间",
                    key: "create_time",
                    render:(h,params)=>{
                        return h('div', function(){
                            if (params.row.create_time) {
                                let n = Date.parse(params.row.create_time);
                                let date = new Date();
                                date.setTime(n);
                                return date.toLocaleString();
                            }else{
                                return '';
                            }                            
                        }())
                    }
                },
                {
                    title: "姓名",
                    key: "name"
                },
                {
                    title: "金额",
                    key: "price"
                },
                {
                    title: "描述",
                    key: "des"
                },
               ],
            data1: [
                {
                    name: "John Brown",
                    age: 18,
                    address: "New York No. 1 Lake Park",
                    date: "2016-10-03"
                },
                {
                    name: "Jim Green",
                    age: 24,
                    address: "London No. 1 Lake Park",
                    date: "2016-10-01"
                },
                {
                    name: "Joe Black",
                    age: 30,
                    address: "Sydney No. 1 Lake Park",
                    date: "2016-10-02"
                },
                {
                    name: "Jon Snow",
                    age: 26,
                    address: "Ottawa No. 2 Lake Park",
                    date: "2016-10-04"
                }
            ],
            data2:[
               
            ]
        };
    },
    mounted() {
        this.getService();
    },
    methods: {
        totalClick(){
            this.getService();
        },
        changePage(index){
            let start = (index - 1) * this.pageSize;
            let end = index * this.pageSize;
            this.data1 = this.historyDate.slice(start, end);
        },
        findOne(){
            let data = {};
            switch(this.select2){
                case "name":
                    data["id"] = "name";                   
                break;
                case "uid":
                    data["id"] = "uid";
                break;
                case "p_num":
                    data["id"] = "p_num";
                break;
            }
            data["value"] = this.search;
            let qs = require('qs');
            this.axios({
                method: "post",
                url: `${this.adminUrl}/getTotalOrderByOne`,
                data: qs.stringify({type:1,id:data["id"], value:data["value"]})
                }).then(response => {
                    if ((response.data.result == 200)) {
                        this.historyDate = response.data.data;
                        this.dataCount = this.historyDate.length;
                        if (this.historyDate.length <= this.pageSize){
                            this.data1 = this.historyDate;
                        }else{
                            this.data1 = this.historyDate.slice(0, this.pageSize);
                        }
                    }else{
                        alert("请求失败");
                    }
                }).catch(err =>{
                    console.log(err);
            });
        },      
        getService(){
            let qs = require('qs');
            this.axios({
                method: "post",
                url: `${this.adminUrl}/getTotalOrder`,
                //url: `${this.siteUrl}/getInvitation`,
                data: qs.stringify(
                    {type:1}
                    )
                }).then(response => {
                    if ((response.data.result == 200)) {
                        this.historyDate = response.data.data;
                        this.dataCount = this.historyDate.length;
                        if (this.historyDate.length <= this.pageSize){
                            this.data1 = this.historyDate;
                        }else{
                            this.data1 = this.historyDate.slice(0, this.pageSize);
                        }
                    }else{
                        alert("请求失败");
                    }
                }).catch(err =>{
                    console.log(err);
            });
        },        
        remove(index){
            let qs = require('qs');
            this.axios({
                method: "post",
                url: `${this.adminUrl}/getBusinessIncomeByOne`,
                //url: `${this.siteUrl}/getInvitation`,
                data: qs.stringify(
                    {uid:`${this.data1[index].uid}`}
                    )
                }).then(response => {
                    if ((response.data.result == 200)) {
                        let data = response.data.data;
                        let d = [];
                        let num = 0;
                        for (let i = 0; i < data.length; i++) {
                            num += parseInt(data[i].price);
                            d.push(data[i]);
                        }
                        d.push({name:"总计", price:num});
                        this.data2 = d;
                    }else{
                        alert("请求失败");
                    }
                }).catch(err =>{
                    console.log(err);
            });
        },
        exportData(){
            this.$refs.table.exportCsv({
                filename: '招商数据',
                columns:this.columns1,
                data:this.historyDate                          
            });
        },        
    }
};
</script>

   



<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1{
    margin: 20px 0px;
}
</style>
